<template>
    <div>
        <SearchConent></SearchConent>
        <div class="category">
            <CategoryItem v-bind:itemTitle="itemTitle" class="CategoryItem" @categoryItemIndex="getCategoryItemIndex"></CategoryItem>
            <CategoryContent v-bind:content="content"></CategoryContent>
        </div>
    </div>

</template>

<script>
  import CategoryItem from "@/views/category/childComps/CategoryItem";
  import CategoryContent from "@/views/category/childComps/CategoryContent";

  import SearchConent from "@/components/common/search/SearchConent";
  export default {
    name: "MyCategory",
    data(){
        return{
            itemTitle:['美食','居家日用','女装','美妆','数码家电','鞋品','男装','内衣','母婴'],
            content:0
        }
    },
    methods:{
        getCategoryItemIndex(index){
            console.log(index)
            this.content=index
        }
    },
    components:{
        CategoryItem,CategoryContent,
        SearchConent
    }
  }
</script>

<style scoped>
.category{
    display: flex;

}
.CategoryItem{
    width: 20%;
}
</style>
